<template>
	<view>
		<view class="u-flex u-font-18 u-flex-center u-p-t-80">
			ASMR | 登录
		</view>
		<view class="u-flex  u-flex-center u-p-l-40 u-p-r-40 u-flex-column u-m-t-60">
			<u--form labelPosition="left" :model="userForm" :rules="rules" ref="uForm">
			<view class=" u-m-t-40">
				<u-form-item prop="username">
					<u--input placeholder="用户名" border="surround" v-model="userForm.username" ></u--input>
				</u-form-item>
			</view>
			<view class=" u-m-t-40">
				<u-form-item prop="email">
					<u--input placeholder="邮箱" border="surround" prop="email" v-model="userForm.email" ></u--input>
				</u-form-item>
			</view>
			<view class=" u-m-t-40">
				<u-form-item prop="suffix">
					<u-input placeholder="验证码" v-model="userForm.suffix" >
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取验证码"></u-code>
							<u-button class="u-reset-button" @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input> 
				</u-form-item>
			</view> 
			<view class=" u-m-t-40">
				<u-form-item prop="password">
					<u--input placeholder="设置密码"  border="surround"  v-model="userForm.password"></u--input>
				</u-form-item>
			</view>
			<view class=" u-m-t-40">
				<u-form-item prop="rpassword">
					<u--input placeholder="设置密码"  border="surround"  v-model="userForm.rpassword"></u--input>
				</u-form-item>
			</view>

			<view class=" u-m-t-40" v-show="false">
				<u--input placeholder="邀请码(可不填写)" border="surround" prop="code" v-model="userForm.code" ></u--input>
			</view>
			<view class=" u-m-t-40 c-9e">
				注册本站有年龄要求，如您未满18周岁请勿注册和使用！
			</view>
			</u--form>
		</view>

		<view class=" u-m-t-50 u-wdd-90 u-he-90 u-font-15 u-lihe-90 b-r-10 u-m-auto text-center"
			style="background-color: #ff3b2b;">
			注册
		</view>
		<view class="u-flex u-p-l-40 u-p-r-40 u-m-t-30  u-flex-between u-flex-y-center">
			<view class="u-font-13" style="visibility: hidden;">
				还没有账号？立即注册
			</view>
			<view class="u-font-13" @click="handle('pages/login')">
				已经注册？返回登录
			</view>
		</view>

	</view>
</template>

<script>

	
	export default {
		data() {
			return {
				tips: '',
				userForm:{
					username: '',
					email: '',
					password: '',
					rpassword: '',
					suffix:'',
					code:'',
				},
				rules: {
					'username': [{
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},{
						type: 'string',
						min:8,
						message: '用户名最少8位数',
						trigger: ['blur', 'change']
					}],
					'email': {
						type: 'email',
						required: true,
						message: '请填写邮箱地址',
						trigger: ['blur', 'change']
					},//
					'suffix': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					'password': [{
						type: 'string',
						required: true,
						
						message: '请填写密码',
						trigger: ['blur', 'change']
					},{
						type: 'string',
						min:6,
						message: '密码最少6位数',
						trigger: ['blur', 'change']
					}],
					'rpassword': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},{
						type: 'string',
						min:6,
						message: '密码最少6位数',
						trigger: ['blur', 'change']
					}],

				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					
					if(this.userForm.email == null || this.userForm.email == "" ){
						uni.$u.toast("请先填写邮箱再点击发送验证码");
						return;
					}
					
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					this.$api.SendEmail({email:this.userForm.email,event:"register"}).then((e) => {
						if(e.code != 0){
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 2000);
						}else{
							uni.$u.toast(e.msg);
						}

					});
					

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			handle(path) {
				uni.$u.route(path)
			}
		},
		onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
	}
</script>

<style>
</style>